<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"  crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右结构页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .container {
            display: flex;
            height: 100vh;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .sidebar {
            width: 200px;
            background-color: #e4cbcf;
            color: #5a4d4d;
            padding: 20px;
            transition: width 0.3s ease;
        }
        .sidebar:hover {
            width: 220px;
        }
        .sidebar a {
            text-decoration: none;
            color: #1d2124;
            display: block;
            padding: 10px 0;
            transition: color 0.3s ease;
        }
        .sidebar a:hover {
            color: #0b2e13;
            transform: translateX(5px);
        }
        .sidebar h2 {
            margin: 0 0 20px;
            font-size: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin-bottom: 10px;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #c3d7e0;
            overflow-y: auto;
        }
        table.table.table-striped {
            border-collapse: collapse;
            width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        table.table.table-striped th,
        table.table.table-striped td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        table.table.table-striped th {
            background-color: #f2f2f2;
        }
        table.table.table-striped tr:hover {
            background-color: #f5f5f5;
        }
        button{
            border: 1px solid gray;
            border-radius: 5%;
            width: 120px;
            height: 50px;
            font-family: '楷体';
            font-size: large;
        }
        nav[aria-label="Page navigation example"] ul.pagination {
            display: flex;
            flex-wrap: nowrap;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        nav[aria-label="Page navigation example"] ul.pagination li.page-item {
            margin-right: 10px;
            white-space: nowrap;
            border: 5px solid #ccc; /* 添加边框样式 */
            border-radius: 5px;
            padding: 10px;
        }

        nav[aria-label="Page navigation example"] ul.pagination li.page-item:last-child {
            margin-right: 0;
        }
        a {
            text-decoration: none;
            color: inherit;
            transition: none;
        }

        a:hover {
            text-decoration: none;
            color: inherit;
        }

        td{
            width: 130px;
            height: 80px;
        }
        .an1{
            background-color: red;
        }
        .an2{
            background-color: #61e761;
        }
    </style>
</head>
<body>
<div class="row" th:replace="header.html"></div>
<div class="container">
    <div class="sidebar" th:include="left.html"></div>
    <div class="content">
        <button type="button" id="addStudentButton" class="btn btn-outline-primary" onclick="addStudent()" >新增学生</button>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>序号</th>
                <th>学生姓名</th>
                <th>密码</th>
                <th>性别</th>
                <th>班级</th>
                <th>生日</th>
<!--                <th>成绩</th>-->
            </tr>
            </thead>
            <tbody>
            <tr th:each="student:${students}">
                <th th:text="${student.id}"></th>
                <th th:text="${student.name}"></th>
                <th th:text="${student.password}"></th>
                <th th:text="${student.sex==1?'男':'女'}"></th>
                <th th:text="${student.clazz}"></th>
                <th th:text="${student.birthday}"></th>
<!--                <th>-->
<!--                    <div th:each="studentScore:${student.scores}">-->
<!--                       <span th:text="${studentScore.course.name}"/>    <span th:text="${studentScore.score}"/> &#10;&#13;-->
<!--                    </div>-->
<!--                </th>-->
                <td><button class="an1"><a th:href="@{/Student/remove(id=${student.id})}">删除</a></button></td>
                <td><button class="an2"><a th:href="@{/Student/toEdit(id=${student.id})}">修改</a></button></td>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/{currPage}/3(currPage=${currPage}-1)}">Previous</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/1/3}">1</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/2/3}">2</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/3/3}">3</a></li>
                <li class="page-item"><a class="page-link" th:href="@{/Student/list/{currPage}/3(currPage=${currPage}+1)}">Next</a></li>
            </ul>
        </nav>
    </div>
</div>
<div th:replace="footer.html"></div>
<script src="/bootstrap/js/jquery.min.js"  crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
<script>
    function addStudent(){
        window.location.href="/Student/toPage?page=addStudent";
    }
    document.addEventListener("DOMContentLoaded",function (){
        var button=document.getElementById("addStudentButton");
        button.addEventListener("click",addStudent);
    });
</script>
</body>
</html>